<!--
  功能：这是角色页面
  作者：menghao.yan
  邮箱：yxs2615@163.com
  时间：2022年09月20日 14:34:19
-->
<template>
  <div>
    <a-row :gutter="16">
      <a-col :span="20">
        <div class="search">
          <a-space>
            <a-input v-model:value="search.name" placeholder="名称检索" />
            <a-input v-model:value="search.code" placeholder="编码检索" />
            <a-button type="primary" @click="serch">
              <template #icon>
                <search-outlined />
              </template>
              检索
            </a-button>
          </a-space>
        </div>
        <div class="crud">
          <a-space>
            <a-button type="primary" @click="insert">
              <template #icon>
                <plus-outlined />
              </template>
              创建
            </a-button>
            <a-button type="primary" @click="update">
              <template #icon>
                <edit-outlined />
              </template>
              编辑
            </a-button>
            <a-button type="primary" danger @click="del">
              <template #icon>
                <delete-outlined />
              </template>
              删除
            </a-button>
          </a-space>
        </div>

        <a-table bordered rowKey="id" :columns="columns" :data-source="tableData" :pagination="pagination" :row-selection="{ selectedRowKeys: form.selectedRowKeys, onChange: onSelectChange}"
                 :scroll="{ y: 600 }">
          <template #bodyCell="{ column,text, record }">
            <template v-if="column.key === 'name'">
              <template v-if="$isNewDataByTime(record.updateTime)">
                <alert-filled :style="{ color: '#eb2f96' }" /> <span :style="{ color: '#eb2f96' }">{{text}}</span>
              </template>
            </template>
            <template v-else-if="column.key === 'action'">
              <a-space>
                <a-button type="primary" @click="updateRow(record)">
                  <template #icon>
                    <edit-outlined />
                  </template>
                  编辑
                </a-button>
                <a-button type="primary" danger @click="delRow(record)">
                  <template #icon>
                    <delete-outlined />
                  </template>
                  删除
                </a-button>
                <a-button type="primary" @click="setRow(record)">
                  <template #icon>
                    <SettingOutlined />
                  </template>
                  设置菜单项
                </a-button>
              </a-space>
            </template>
            <template v-else>
              <span>{{text}}</span>
            </template>
          </template>
        </a-table>
      </a-col>
      <a-col :span="4">
        <menuTree :row="form.row" />
      </a-col>
    </a-row>

    <a-modal :open="form.visible" :title="form.type=='insert'?'创建角色信息':'编辑角色信息' " @change="form.visible = false" :footer="null" destroyOnClose>
      <formModel :row="form.row" :type="form.type" @success="successForm" />
    </a-modal>
  </div>
</template>

<script>
import { PlusOutlined, AlertFilled, EditOutlined, DeleteOutlined, SearchOutlined } from '@ant-design/icons-vue'
import { pageList, remove } from '@/api/sysRoleApi'
import { defineComponent, reactive, toRefs, onMounted } from 'vue'
import {} from 'vue-router'
import {} from 'vuex'
import formModel from './formModel.vue'
import menuTree from './menuTree.vue'
import { message } from 'ant-design-vue'
export default defineComponent({
  name: 'sysRole',
  props: {},
  emits: [],
  setup(props, context) {
    const columns = [
      {
        title: '角色名称',
        dataIndex: 'name',
        key: 'name'
      },
      {
        title: '角色编码',
        dataIndex: 'code',
        key: 'code'
      },
      {
        title: '最后修改时间',
        dataIndex: 'updateTime',
        key: 'updateTime'
      },
      {
        title: '操作',
        key: 'action',
        align: 'center',
        width: 350,
        fixed: 'right'
      }
    ]
    const pagination = {
      current: 1,
      pageSize: 10,
      showSizeChanger: true,
      total: 0,
      showTotal: (total, range) => {
        return `${range[0]}-${range[1]} 共 ${total} 条数据`
      },
      onChange: (page, pageSize) => {
        data.pagination.current = page
        data.pagination.pageSize = pageSize
        initPageList()
      }
    }

    const search = {
      name: '',
      code: ''
    }

    const data = reactive({
      columns,
      pagination,
      search,
      tableData: null,
      form: {
        selectedRowKeys: [],
        selectedRows: [],
        row: null,
        type: 'insert',
        visible: false
      }
    }) //里面写所有的响应式数据，像vue2中的data一样

    // 初始化表格列表
    let initPageList = () => {
      let params = {
        current: pagination.current,
        size: pagination.pageSize,
        name: search.name,
        code: search.code
      }
      pageList(params).then(resd => {
        data.tableData = resd.records
        data.pagination.total = resd.total
      })
    }
    /* 创建全选 */
    const onSelectChange = (selectedRowKeys, selectedRows) => {
      data.form.selectedRowKeys = selectedRowKeys
      data.form.selectedRows = selectedRows
    }
    /* 创建数据 */
    let insert = () => {
      data.form.visible = true
      data.form.type = 'insert'
    }
    /* 更新数据 */
    let update = () => {
      // 1、判断是否选择了一个
      if (data.form.selectedRowKeys.length != 1) {
        message.warning('编辑操作有且只有选择一行数据')
        return false
      }
      data.form.row = data.form.selectedRows[0]
      data.form.visible = true
      data.form.type = 'update'
    }
    /* 更新行数据 */
    let updateRow = row => {
      data.form.row = row
      data.form.visible = true
      data.form.type = 'update'
    }
    /*删除数据 */
    let del = () => {
      // 1、判断是否选择了一个
      if (data.form.selectedRowKeys.length == 0) {
        message.warning('删除操作至少选择一行数据')
        return false
      }
      let params = data.form.selectedRowKeys
      remove(params).then(resd => {
        message.success(`${resd} 条数据已删除`)
        initPageList()
      })
    }
    /*删除行数据 */
    let delRow = row => {
      let params = [row.id]
      remove(params).then(resd => {
        message.success(`${resd} 条数据已删除`)
        initPageList()
      })
    }
    // 表单成功回调函数
    let successForm = () => {
      initPageList()
      data.form.visible = false
    }

    // 设置角色
    let setRow = row => {
      data.form.row = row
    }

    // 检索
    let serch = () => {
      pagination.current = 1
      initPageList()
    }

    // 页面初始化
    onMounted(() => {
      initPageList() // 初始化表格
    })

    return {
      ...toRefs(data),
      onSelectChange,
      insert,
      update,
      updateRow,
      del,
      delRow,
      setRow,
      successForm,
      serch
    }
  },
  components: {
    PlusOutlined,
    formModel,
    AlertFilled,
    EditOutlined,
    DeleteOutlined,
    SearchOutlined,
    menuTree
  }
})
</script>

<style scoped>
.crud,
.search {
  margin-bottom: 10px;
}
</style>